// 网上找，复制粘贴，有兴趣的话自己去研究源码
// 1. 找到图片
let image = $('#image');
// 2. 剪裁配置项
let option = {
  // 设置剪裁比例
  aspectRatio: 1 / 1,
  // 指定预览区域
  preview: '.img-preview',
}
// 3. 调用cropper方法，实现初始的效果
image.cropper(option);



// ---------------- 点击 上传 按钮 触发文件域的单击事件 ----------------------
$('button:contains("上传")').on('click', function () {
  $('#file').trigger('click');
})

// ---------------- 选择了图片，更换剪裁区的图片 ----------------------
$('#file').on('change', function () {
  // 获取图片的url地址
  if (this.files.length > 0) {
    // 1. 找到文件对象
    // console.dir(this);  // 看看文件域
    let fileObj = this.files[0];
    // 2. 创建url
    let url = URL.createObjectURL(fileObj);
    // console.log(url);
    // 更换剪裁区的图片
    // image.cropper('destroy').attr('src', url).cropper(option);
    image.cropper('replace', url);
  }
})


// ---------------- 选择了图片，更换剪裁区的图片 ----------------------
// 点击 确定 按钮 --> 剪裁图片 --> 转换成 base64 格式(接口要求) --> 提交给接口
$('button:contains("确定")').on('click', function () {
  // 1. 剪裁图片
  let canvas = image.cropper('getCroppedCanvas', { width: 30, height: 30 });
  // canvas 有一套内置的API方法，属于JS原生语法(只有指定jpeg格式，才能指定图片质量这个参数)
  // 2. 转成 base64 格式
  let base64 = canvas.toDataURL('image/jpeg', 0.8);
  // console.log(base64);  // 字符串、默认是PNG格式 -- 可以加参数改变格式和质量
  // 3. 发送ajax请求
  // 要对 base64 进行编码，因为其中有很多特殊符号
  axios.post('/my/user/avatar', `avatar=${encodeURIComponent(base64)}`).then(res => {
    let { status, message } = res.data;
    if (status === 0) {
      layer.msg(message);
      // 更换了头像，更新父页面(index.html)的头像
      window.parent.getUserInfo();
    }
  })
});












